<template>
    <div class="h-full p-4">
        <!-- h-[calc(100vh-2rem)] -->
        <div style="height: 3000px;" class="bg-white rounded-xl shadow-lg p-6 intro-y relative">
            <div class="absolute right-5 top-5 bg-black/60 text-white px-3 py-2 rounded text-sm z-10">
                提示：可拖拽查看、鼠标滚轮缩放
            </div>
            <div class="chart-container">
                <div ref="chartRef" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import * as $api from "@/api/api.js"

const chartRef = ref(null)
let chart = null

interface CategoryItem {
    catCode: string;
    catSeqNum: number;
    catName: string;
    catParentCode: string | null;
    catLevel: number;
    catDesc: string | null;
    catStandards: any;
    children?: CategoryItem[];
}

const transformData = (data: CategoryItem[]) => {
    const processNode = (item: CategoryItem) => {
        return {
            name: item.catName,
            children: item.children ? item.children.map(child => processNode(child)) : undefined
        }
    }

    return data.map(item => processNode(item))
}

const initChart = (data: CategoryItem[]) => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value)
        const transformedData = transformData(data)
        const option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    data: transformedData,
                    top: '5%',
                    left: '10%',
                    bottom: '5%',
                    right: '35%',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 14,
                        // offset: [0, -50]
                    },
                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left',
                            fontSize: 12
                        }
                    },
                    emphasis: {
                        focus: 'descendant'
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750,
                    initialTreeDepth: -1,
                    roam: true,
                    nodeGap: 40,
                    layoutOrientation: 'LR',
                    itemStyle: {
                        borderWidth: 1
                    }
                }
            ]
        }
        chart.setOption(option)
    }
}

const handleResize = () => {
    chart && chart.resize()
}

const getCategoryTree = () => {
    $api.QueryTree().then(res => {
        if (res) {
            const rootData = [{
                catCode: res.catCode,
                catSeqNum: res.catSeqNum,
                catName: res.catName,
                catParentCode: res.catParentCode,
                catLevel: res.catLevel,
                catDesc: res.catDesc,
                catStandards: res.catStandards,
                children: res.children || []
            }]
            initChart(rootData)
        }
    })
}

onMounted(() => {
    getCategoryTree()
    window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
    chart && chart.dispose()
    window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.chart-container {
    height: 100%;
    width: 100%;
    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>